<template>
<div>
  <header class="mui-bar mui-bar-nav">
    <a class="iconfont icon-fanhui header_fanhui" @tap="goBack"></a>
    <h1 class="mui-title">{{brandName}}其他车系</h1>
  </header> 
  <div class="mui-content mui-scroll-wrapper" id="pullrefresh"> 
      <div class="mui-scroll">
        <!--热门车型报价-->
        <div  class="panle carlist" :class="($store.state.appCarlist.actBrand || $store.state.appCarlist.actPrice || $store.state.appCarlist.actCarType || $store.state.appCarlist.actCountry) ?'' : 'carlist-top'">
            <div class="c">
                <ul>
                    <li v-for="(v,i) in otherCarSeriesList" >
                      <div   v-if="v.pic" class="lst"  :style="{ 'border-top': !i? 'none' : '1px solid #f0f0f0'}" @tap="goCarDetail(v.id)">
                          <div class="lstImg">
                              <img  v-lazy="$store.state.appData.imgUrl+v.pic">
                          </div>
                          <div class="lstMsg">
                              <p style="font-size:0.7rem;color:#333;line-height:15px;">{{v.name}}</p>
                              <p style="font-size:0.75rem;color:#ff6a27;line-height:15px;" v-if="v.minGuidePrice != null || v.maxGuidePrice != null">{{v.minGuidePrice}}万~{{v.maxGuidePrice}}万</p>
                              <span  v-else style="font-size:0.75rem;color:#ff6a27;line-height:15px;">暂无指导价</span>
                              <p style="font-size:0.55rem;line-height:15px;"><span style="color:#ff6a27;">{{v.carSeriesNum}}</span>种车型</p>
                              <!-- <p style="font-size:0.6rem;color:#ff6a27;line-height:15px;">{{(v.minAllPrice/10000).toFixed(2)===(v.maxAllPrice/10000).toFixed(2)?(v.maxAllPrice/10000).toFixed(2):(v.minAllPrice/10000).toFixed(2)+'~'+ (v.maxAllPrice/10000).toFixed(2)}}万</p> -->
                          </div>
                      </div>
                      <div   v-else class="lst"  :style="{ 'border-top': !i? 'none' : '1px solid #f0f0f0'}" @tap="goCarDetail(v.id)">
                          <div class="lstImg">
                              <img  v-lazy="noCarPic">
                          </div>
                          <div class="lstMsg">
                              <p style="font-size:0.7rem;color:#333;line-height:15px;">{{v.name+"(暂无车型图片)"}}</p>
                              <p style="font-size:0.75rem;color:#ff6a27;line-height:15px;" v-if="v.minGuidePrice != null || v.maxGuidePrice != null">{{v.minGuidePrice}}万~{{v.maxGuidePrice}}万</p>
                              <span  v-else style="font-size:0.75rem;color:#ff6a27;line-height:15px;">暂无指导价</span>
                              <p style="font-size:0.6rem;line-height:15px;"><span style="color:#ff6a27;">{{v.carNum}}</span>种车型</p>
                              <!-- <p style="font-size:0.6rem;color:#ff6a27;line-height:15px;">{{(v.minAllPrice/10000).toFixed(2)===(v.maxAllPrice/10000).toFixed(2)?(v.maxAllPrice/10000).toFixed(2):(v.minAllPrice/10000).toFixed(2)+'~'+ (v.maxAllPrice/10000).toFixed(2)}}万</p> -->
                          </div>
                      </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </div>
  <!-- 参数空时页面 -->
  <div class="empty" v-if="otherCarSeriesList.length==0">
    <span class="icon-zanwu-01"></span>
    <span class="empty_text">暂无符合条件的车型</span>
  </div>
</div>
</template>

<script>
import { findSeriescarsBycarSeriesId } from '@/nodeApi/carDetail'
import { getcarModelDetail } from '@/api/carDetail'
import { mapState } from 'vuex'
/* 这边记得引入刷新组件,下拉后无法固定滑动，切记 */
import 'static/js/mui.pullToRefresh.js'
import 'static/js/mui.pullToRefresh.material.js'
import mui from 'static/js/mui'
  export default {
    data() {
      return {
          brandName: '',
          noCarPic:'static/img/noCarPic.png',
          obj:{
              carSeriesId:"",
              customerId:this.$store.getters.user.id
          },
          resData:{
            "carSeriesId":'',
            "pageNow":1,
            "pageSize":6
          },
          otherCarSeriesList: []
      }
    },
    props: {//也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
        pagingMsg: {
            type: Object
        }
    },
    watch: {},
    methods: {
        goBack(){
            window.history.go(-1)
        },
        goCarDetail(carSeriesId){
            this.obj.carSeriesId=carSeriesId 
                getcarModelDetail(this.obj).then(resp => {
                this.$store.commit("GetCarDetails", resp.data) 
                this.$router.push({
                    path: "/modelsOffer",
                })
            })
        },
        minGuidePrice(v) {
            // //console.log(v)
            let minGuidePrice = parseFloat(v.minGuidePrice)
            let maxGuidePrice = parseFloat(v.maxGuidePrice)
            if(minGuidePrice < maxGuidePrice){
                return minGuidePrice
            }
            else{
                return maxGuidePrice
            }
        },
        HanderFindSeriescarsBycarSeriesId() {
          //console.log(this.carDetails.allcarModelMsg.currentCar.carSriesId)
          this.resData['carSeriesId'] = this.carDetails.allcarModelMsg.currentCar.carSriesId
          findSeriescarsBycarSeriesId(this.resData).then(res => {
            this.brandName = res.data.brandName

            this.otherCarSeriesList = this.otherCarSeriesList.concat(res.data.cars)
              //console.log(res.data.page.totalPageCount)
              //console.log(this.resData['pageNow'])
              if(res.data.page.totalPageCount <= this.resData['pageNow']){
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
              }
              else{
                // 如果有更多数据，则继续
                
                  mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
              }

          })
        } 
    },
    mounted () {
        var that = this;
        mui.init({
          pullRefresh : {
              container:"#pullrefresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
              up : {
                  height:50,// 可选.默认50.触发上拉加载拖动距离
                  auto:false,// 可选,默认false.自动上拉加载一次
                  contentrefresh : "正在加载...",// 可选，正在加载状态时，上拉加载控件上显示的标题内容
                  contentnomore:'没有更多数据了',// 可选，请求完毕若没有更多数据时显示的提醒内容；
                  callback : function() {
                    // 加载更多的内容
                    ////console.log("触发下来加载")
                    that.resData['pageNow'] = that.resData['pageNow'] + 1
                    that.HanderFindSeriescarsBycarSeriesId()
                  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              }
          },
          keyEventBind: {
            backbutton: true  //关闭back按键监听
          }
        })
        mui.back = function() {
          history.go(-1)
        };
    },
    filters: {},
    computed:{
      ...mapState([
          'carDetails',
      ]),
    },
    created() {
      this.HanderFindSeriescarsBycarSeriesId()
    }
  };
</script>

<style lang="scss" scoped>
    /*车型选择*/
    .carlist {
        background-color:#f5f5f5;
        width: 100%;
        position: relative;
        .lst {
            border-top:1px solid #e9e9e9;
            width: 100%;
            height:6rem;
            background:#fff;
            overflow: hidden;
            padding:10px;
            .lstImg {
                width: 45%;
                float: left;
                height: 100%;
                text-align:center;
                img{
                height:100%;
                vertical-align:middle;
                }
            }
            .lstMsg {
                width: 55%;
                float: left;
                height: 100%;
                padding:10px 0px 0px 15px;
                p {
                    text-overflow:ellipsis;
                    overflow: hidden;
                    word-wrap: break-word; 
                    word-break: normal; 
                    margin-bottom:15px;
                }
            }
        }
    }
.carlist-top {
  min-height:0px;
  padding-bottom:70px;
}
/* 页面为空时 */
.empty {
  width: 100%;
  height: 100rem;
  background-color: #fff;
  z-index:2;
  position: relative;
}
.icon-zanwu-01{
  font-size:5rem;
  position: relative;
  display: block;
  text-align: center;
  padding-top:240px;
}
.icon-zanwu-01:before {
  color:#aaaaaa;
}
.empty_text{
  width:100%;
  display: block;
  text-align: center;
  color:#aaaaaa;
  font-size:14px;
}
</style>